<template>
    <scroll
      ref="scroll"
      class="s-wrapper"
      :data1="list"
      :listenScroll="true"
      :probeType = "3"
      @scroll="scroll"
    >
      <div>
        <detail-banner
          :sightName="sightName"
          :bannerImg="bannerImg"
          :bannerImgs="gallaryImgs"
        ></detail-banner>
        <detail-header :posY="posY"></detail-header>
        <div class="content">
          <detail-list :list="list"></detail-list>
        </div>
      </div>
      <detail-fixed-header class="fixed-title" :posY="posY"></detail-fixed-header>
    </scroll>
</template>

<script scoped>
import { getDetailInfo } from 'network/detail'

import Scroll from 'common/scroll/Scroll'
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
import DetailFixedHeader from './components/FixedHeader'
import DetailList from './components/List'
export default {
  name: 'Detail',
  props: ['id'],
  data () {
    return {
      sightName: '',
      bannerImg: '',
      gallaryImgs: [],
      list: [],
      posY: 0
    }
  },
  components: {
    Scroll,
    DetailBanner,
    DetailHeader,
    DetailFixedHeader,
    DetailList
  },
  mounted () {
    this.getDetailData()
  },
  updated () {
    this.$refs.scroll.refresh()
  },
  methods: {
    getDetailData () {
      getDetailInfo(this.id).then(res => {
        // console.log(res)
        if (res.ret && res.data) {
          const data = res.data
          this.sightName = data.sightName
          this.bannerImg = data.bannerImg
          this.gallaryImgs = data.gallaryImgs
          this.list = data.categoryList
        }
      })
    },
    scroll (newPos) {
      // console.log(newPos)
      this.posY = newPos.y
    }
  }
}
</script>

<style lang='less' scoped>
.right-enter-active {
  animation: right-in 0.5s;
}
.right-leave-active {
  animation: right-in 0.5s reverse;
}
@keyframes right-in {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  50% {
    transform: translate3d(50%, 0, 0);
  }
  100% {
    transform: translate3d(0%, 0, 0);
  }
}
.s-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .fixed-title {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
  }
  .content {
    height: 50rem;
  }
}
</style>
